<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>管理系统+</title>
<jsp:include page="/WEB-INF/views/common.jsp"></jsp:include>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="${ctx}/js/user/time.js"></script>
<script type="text/javascript" src="${ctx}/js/user/userlogin.js"></script>
<style type="text/css">
a:link {
	color: #3b2e67;
	text-decoration: none;
}

a:visited {
	color: #66CCFF;
}

a:hover {
	color: #4876FF;
	text-decoration: underline;
	font-size: 22px;
}

a:active {
	color: #4B0082;
}
#logoTop tr td label {
	font-size: 12px;
	font-family: "微软雅黑";
	}
</style>
</head>
<%
	request.getAttribute("currentUser");
	request.getAttribute("sysUserRoles");
%>
<body class="easyui-layout">
	<!-- 头部 -->
	<div data-options="region:'north',title:'欢迎使用',split:true" style="height: 125px;">
		<div style="height: 85px;width: 100%;background-color:#EBEBEB;">
			<!-- 存放logo -->
			<!-- <img alt="" style="background-repeat: no-repeat;" src="" width="60%" height="45px"> -->
			<div style="float:right;height: 85px;width: 420px;background-color:#F8F8FF;">
				<table id="logoTop" border="0px;" width="100%" style="float: right;">
					<tr>
						<td>
						<img height="70%" alt="" src="${ctx }/static/jquery-easyui-1.4.3/themes/metro/IconsExtension/user.png">
						<label>登录人:</label></td>
						<td>
							<label>
								<c:if test="${!empty currentUser}">
									${currentUser.name }
								</c:if>
								<c:if test="${empty currentUser}">
									未登录的用户
								</c:if>
							</label>
						</td>
					</tr>
					<tr>
						<td>
							<img height="70%" alt="" src="${ctx }/static/jquery-easyui-1.4.3/themes/metro/IconsExtension/user_key.png">
							<label>角色:</label>
						</td>
						<td>
							<label>
								<c:if test="${!empty sysUserRoles}">
									<c:forEach var="suRoles" items="${sysUserRoles}">
										${suRoles.name },
									</c:forEach>
								</c:if>
								<c:if test="${empty sysUserRoles}">
									未登录的角色
								</c:if>
							</label>
						</td>
					</tr>
					<tr>
						<td>
							<img alt="" src="${ctx }/static/jquery-easyui-1.4.3/themes/metro/IconsExtension/flag_cn.png">
							<label>日期:</label>
						</td>
						<td>
							<label id="pDate"></label>
						</td>
						<td>
							<a href="javascript:void(0)" id="logoutId" 
							class="easyui-linkbutton" iconCls="icon-bullet_delete">注销</a>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
	<!-- 底部 -->
	<!-- <div data-options="region:'south',title:'底部 Title',split:true,collapsed:true" style="height: 100px;"> 
	</div>-->
	<!-- 右侧 -->
	<div data-options="region:'east',iconCls:'icon-reload',title:'右边',split:true,collapsed:true" style="width: 100px;">
	</div>
	<!-- 左侧 -->
	<div data-options="region:'west',title:'菜单功能',split:true" style="width: 220px;">
		<!-- 菜权限读取菜单 -->
		<ul id="menuTreeId" class="" style="margin: 10px 0px 0px 5px;"></ul>
	</div>
	<!-- 中部 -->
	<div data-options="region:'center',title:''"
		style="padding: 5px; background: #eee;">
		<div class="easyui-tabs" fit="true" border="false" id="tabsId">
			<div title="首页" style="/* background-image: url('/pic/info.png'); */background-repeat: no-repeat;background-size:100% 100%;">
				<div align="center" style="padding-top: 10px;">
					<font color="red" size="2">欢迎使用EasyUi（Java后台版）</font>
					<font color="red" size="2">请使用IE9，谷歌，不支持IE低版本</font>
				</div>
				<!-- h5视频播放 -->
				<!-- <div align="left" style="margin-left: 20px;">
					<video id="qycId" width="400" height="280" controls="controls" loop="loop" autoplay="autoplay"> 
						<source src="/file/mp4/qyc.mp4" type="video/mp4" />
					</video>
					<video id="hyId" width="400" height="280" controls="controls" />
						<source src="/file/mp4/hy.mp4" type="video/mp4" />
					</video>
					<video id="hyId" width="400" height="280" controls="controls" />
						<source src="/file/mp4/lyce.amr" type="video/mp4" />
					</video>
				</div> -->
				<div style="margin: 20px 0px 0px 20px;">
					<a href="#">在左侧布局或者底部布局，用来放信息，比如新闻什么，赞助商什么的，不至于首页空着</a>
				</div>
			</div>
		</div>
	</div>
	<!-- 绑定tab使用右键菜单的元素 -->
	<div id="mm" class="easyui-menu" style="width: 120px;">
        <div id="mm-tabclose" name="6">刷新</div>
        <div id="Div1" name="1">关闭</div>
        <div id="mm-tabcloseall" name="2">全部关闭</div>
        <div id="mm-tabcloseother" name="3">除此之外全部关闭</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright" name="4">当前页右侧全部关闭</div>
        <div id="mm-tabcloseleft" name="5">当前页左侧全部关闭</div>
    </div>
</body>
<script type="text/javascript">
	$(function() {
		//设置默认音量
		//document.getElementById("hyId").volume=0.5; //设置50%
		$("#menuTreeId").tree({ //tree菜单全部加载
			url : $WEB_ROOT_PATH+'/w/wh003/wh034',
			lines : true,
			animate : true,
			onLoadSuccess : function(node, data) {
				if (data) {
					$(data).each(function(index, d) {
						/* 开发阶段取消$("#menuTreeId").tree("collapseAll", d.target); //折叠关闭所有
						// 查找一个节点然后返回它
						if (index == 0) { //默认展开第一个
							var node = $('#menuTreeId').tree('find', d.id);
							$("#menuTreeId").tree("expand", node.target);
						} */
					});
				}
			},
			onClick : function(node) { //打开tab
				if (node.url !="" && null !=node.url) {
					openTab(node.text, node.url,node.id);
				}
			}
		});
		// 新增Tab
		function openTab(text, url,menuId) {
			if ($("#tabsId").tabs('exists', text)) {
				$("#tabsId").tabs('select', text);
			} else {
				/* var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="
						+ url + '?menuId='+menuId+"></iframe>"; */
				var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+$WEB_ROOT_PATH+"/"+url+"></iframe>";
				$("#tabsId").tabs('add', {
					tools:[ { //刷新
						iconCls:"icon-mini-refresh",
						handler:function(){
							var currTab =  self.parent.$('#tabsId').tabs('getSelected'); //获得当前tab
							refreshTab(currTab);
						}
					} ],
					title : text,
					closable : true,
					content : content
				});
			}
		}
		$("#refId").click(function(){ //刷新
			var currTab =  self.parent.$('#tabsId').tabs('getSelected'); //获得当前tab
			refreshTab(currTab);
		});
		/* $("#tabsId").tabs({ //添加tab后触发
			onAdd:function(title,index){ //增加提示框
				showToolsTip(index);
			},
			onClose:function(title,index){ //关闭后销毁提示框
				destroyToolsTip(index);
			}
		});
			function showToolsTip(index){ //工具条提示
			var clo = $(".tabs-header .tabs .tabs-close").eq(index-1);
			clo.tooltip({
				position: 'bottom',
				content: '<span style="color:#fff">关闭</span>',
				onShow: function(){
					$(this).tooltip('tip').css({
						backgroundColor: '#666',
						borderColor: '#666'
					});
				}
			});
		} */
		/* function destroyToolsTip(index){ //销毁提示框
			var clo = $(".tabs-header .tabs .tabs-close").eq(index - 1);
			clo.tooltip("destroy");
			var ref = $(".tabs-header .tabs .icon-mini-refresh").eq(index-1);
			ref.tooltip("destroy");
		} */
		
		//监听右键事件，创建右键菜单
        $('#tabsId').tabs({
            onContextMenu:function(e, title,index){
                e.preventDefault();
                if(index>0){
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            }
        });
        //右键菜单click
        $("#mm").menu({
            onClick : function (item) {
                closeTab(this, item.name);
            }
        });
		
	 	function closeTab(menu, type) {
           var allTabs = $("#tabsId").tabs('tabs');
           var allTabtitle = [];
           $.each(allTabs, function (i, n) {
               var opt = $(n).panel('options');
               if (opt.closable)
                   allTabtitle.push(opt.title);
           });
           var curTabTitle = $(menu).data("tabTitle");
           var curTabIndex = $("#tabsId").tabs("getTabIndex", $("#tabsId").tabs("getTab", curTabTitle));
           switch (type) {
               case "1"://关闭当前
                   $('#tabsId').tabs('close',curTabIndex);
                   return false;
                   break;
               case "2"://全部关闭
                   for (var i = 0; i < allTabtitle.length; i++) {
                       $('#tabsId').tabs('close', allTabtitle[i]);
                   }
                   break;
               case "3"://除此之外全部关闭
                   for (var i = 0; i < allTabtitle.length; i++) {
                       if (curTabTitle != allTabtitle[i])
                           $('#tabsId').tabs('close', allTabtitle[i]);
                   }
                   $('#tabsId').tabs('select', curTabTitle);
                   break;
               case "4"://当前侧面右边
                   for (var i = curTabIndex; i < allTabtitle.length; i++) {
                       $('#tabsId').tabs('close', allTabtitle[i]);
                   }
                   $('#tabsId').tabs('select', curTabTitle);
                   break;
               case "5": //当前侧面左边
                   for (var i = 0; i < curTabIndex - 1; i++) {
                       $('#tabsId').tabs('close', allTabtitle[i]);
                   }
                   $('#tabsId').tabs('select', curTabTitle);
                   break;
               case "6": //刷新
                   var currTab =  self.parent.$('#tabsId').tabs('getSelected'); //获得当前tab
                   refreshTab(currTab);
                   break;
           	}
       	}
		
	});
	
	//刷新当前标签Tabs
	function refreshTab(currTab) {
		var url = $(currTab.panel('options').content).attr('src');
		$('#tabsId').tabs('update', {
			tab: currTab,
			options: {
				href: url
			}
		});
	}
	
</script>
</html>
